<template>
    <transition>
        <el-menu
        class="el-menu-vertical-demo ecsc-menu"
        background-color="#E8E8E9"
        :collapse="isCollapse"
        >
            <el-submenu v-for="navItem in menuData" :key="navItem.code" :index="navItem.code" level="1">
                <template slot="title">
                    <!-- <i class="el-icon-location"></i> -->
                    <span>{{navItem.title}}</span>
                </template>
                <el-submenu v-if="!isCollapse" :key="navItemC.code" level="2" v-for="navItemC in navItem.children"
                            :index="navItemC.code"  @click.stop="openSub(navItemC)">
                    <template slot="title">
                            <span slot="title"> {{navItemC.title}}</span>
                    </template>
                    <el-menu-item level="3" :key="navPage.code" v-for="navPage in navItemC.children"
                                  :index="navPage.code" :unique-opened="true"
                                    @click="renderUrl({path:navPage.router,params:{href:navPage.href,title:navPage.title,code:navPage.code}})"
                                   >
                        <a v-if="navPage.router != '/thirdPart'">{{navPage.title}}</a>

                    </el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </transition>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
    name: 'ecsc-nav',
    data() {
        return {  }
    },
    computed: {
        ...mapGetters(['menuData', 'isCollapse'])
        
    },
    created(){
        console.log(this.menuData,'nlllll');
    },
    methods: {
        openSub(item) {
            this.$set(item, 'opened', !item.opened)
        },
        renderUrl(to){
            this.$router.push(to);
        }
    }
}
</script>
<style lang="less" scoped>
    .el-menu-item a {
        vertical-align: baseline !important;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 160px;
        min-height: 400px;
        transition: 1s;
    }

    .el-menu {
        border: none;
        border-right: none !important;
    }

    .ecsc-menu.el-menu--collapse {
        top: 50px;
        position: absolute;
    }

    .el-menu--collapse .el-submenu .el-menu-item {
        min-width: 100px;
        /*max-width: 160px;*/
        /*width: 80px;*/
        padding-right: 0px;
        height: auto;
        border-left: none;
        padding-left: 0px !important;
    }

    .el-submenu .el-menu-item:hover, .el-submenu__title:hover {
        background-color: #152E4F;
    }

    ul:not(.el-menu--collapse) li[role='menuitem'] > .el-submenu__title:hover {
        /*border-left: 3px solid #0C9AFF;*/
        background-color: #133664;
    }

    /*选中的菜单带有背景色*/
    ul:not(.el-menu--collapse) li[level='3'].is-active {
        background-color:  #428BCA !important;
        color: #FFF;
    }

    /*选中的菜单带有背景色*/
    ul:not(.el-menu--collapse) li[level='3'].is-active a {
        color: #FFF;
    }

    li[role='menuitem'][level='3']:hover {
        background-color: #133664;
        color: #fff;
    }

    li[role='menuitem'][level='3'] a {
        color: #428BCA;
    }
</style>


